<template>
  <div class="about">
    <h1>This is an about page {{ num }}</h1>
    <button @click="save">保存</button>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</template>
<style scoped>
.item {
  height: 300px;
}
</style>
<script>
export default {
  data() {
    return {
      flag: false,
      num: 10
    };
  },
  
  beforeRouteEnter(to, from, next) {
    console.log("3");
    next((vm) => {
      console.log("2");
      vm.getData();
    });
  },
  beforeCreate() {
    console.log("1");
    console.log(this);
  },
  methods: {
    save() {
      alert("保存");
      this.flag = true;
    },
    getData() {
      //请求数据
      setTimeout(() => {
        this.num = 9999;
      }, 1000);
    },
  },
  mounted(){
    let topNum  = window.localStorage.getItem('top');
    document.documentElement.scrollTop = topNum*1;

  },
  beforeRouteLeave(to, from, next) {
    // window.localStorage.setItem('top',document.documentElement.scrollTop+"");

    if (this.flag) {
      next();
    } else {
      const answer = window.confirm("内容没有保存 是否确定要离开");
      if (answer) {
        next();
      } else {
        next(false);
      }
    }
  },
};
</script>
